{{ header }}
<div id="account-account" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
  {% endif %}
  <div class="row">
    {{ column_left }}
    {% if column_left and column_right %}
      {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
      {% set class = 'col-sm-9' %}
    {% else %}
      {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">
        <form action="{{ action }}" method="post" enctype="application/x-www-form-urlencoded">
          <div id="avatar-content">
          <img src="{{ avatar }}" class="img-responsive" id="avatar-image"/>
          <input type="hidden" name="avatar_url" value="{{ avatar_url }}"/>
          <input type="file" name="avatar" class="image-upload" id="avatar-file" style="display: none;"/>
          <a href="javascript:;" id="upload-avatar">{{ button_avatar }}</a>
            <input type="submit" name="submit" value="{{ button_submit }}">
          </div>
        </form>
      {{ content_bottom }}
    </div>
    {{ column_right }}</div>
</div>
<script type="text/javascript">
  $(document).on('click', '#upload-avatar', function () {
    $(this).parent('div').find('input[type="file"]').click();
  });
  $(document).on('change', '.image-upload', function () {
    var ele_id = $(this).attr('id');
    var img_id = $('#avatar-image').attr('id');
    if ($(this).val()) {
      var id = $(this).attr('id') + Date.parse(new Date());
      ajaxUpload(ele_id, img_id);
      $('#avatar-content').find('.image-upload').remove();
      $('#avatar-content').append('<input class="image-upload" type="file" name="' + id + '" id="' + id + '" class="image-upload" style="display: none;">');
    }
  });
  function ajaxUpload(ele_id, img_id) {
    var load_index = layer.load(0, {
      shade: [0.1,'#000']
    });
    $.ajaxFileUpload({
      url: 'index.php?route=account/avatar/upload',
      type: 'post',
      secureuri: false,
      fileElementId: ele_id,
      dataType: 'json',
      success: function(json) {
        layer.close(load_index);
        var code = json['code'];
        if (code) {
          $('input[name="avatar_url"]').val(json['url']);
          $('#' + img_id).prop('src', json['image']);
        } else {
          layer.msg(json['msg']);
        }
      },
      error: function(data, status, e) {
        console.log(e);
      }
    });
  }
</script>
{{ footer }}